<template>
	<view class="detail-container">
		<!-- 详情页导航 -->
			<custom-nav-bar
			  title="卦象详情"
			  :show-back="true"
			  bg-color="#4B79FF"
			/>
			
		<scroll-view 
		      class="content"
		      scroll-y
		      :style="{ 
		        height: `calc(100vh)`,
		        paddingTop: `${navHeight+40}rpx`
		      }"
		    >	
	<!-- 	<view class ="content">	 -->
			<view v-if = "isqueryUI" class="quanyao">
				<view class="btn-box">
					<input class="input-default" placeholder="请输入卦序号:102322" v-model="inputValue" placeholder-class="color:#4a4a4a" />
					<view class="btn-default" @click="btnClick('A3')">查询</view>
				</view>
				<view class="base_line" margin="10rpx"></view>
			</view>
			<!-- 卦象基本内容 -->   
			<view class="card_content">
				<view class="quanyao">
					<view class="lable-view">
						<view class="lable-view-title">卦事：</view>
						<view v-html="yaoData.yaoTitle"></view>
					</view>
					<view class="base_line" margin="10rpx"></view>
				</view>
				<view class="quanyao">
					<view class="lable-view">
						<view class="lable-view-title">时间：</view>
						<view v-html="shijian"></view>
					</view>
					<view class="base_line" margin="10rpx"></view>
				</view>
				<view class="quanyao">
					<view class="lable-view">
						<view class="lable-view-title">干支：</view>
						<view v-html="sizhu"></view>
						<view class="lable-view-title" style=" white-space: pre-wrap;"> 空亡：</view>
						<view v-html="kongwang"></view>
					</view>
					<view class="base_line" margin="10rpx"></view>
				</view>
				<view class="quanyao">
					<view class="lable-view">
						<view class="lable-view-title">神煞：</view>
						<view v-html="shenSha"></view>
					</view>
					<view class="base_line" margin="10rpx"></view>
				</view>
				<view class="quanyao">
					<view class="lable-view">
						<checkbox-group @change="checkboxChange" class="check-box">
							<label v-for="item in items" :key="item.value">
								<checkbox :value="item.value" :checked="item.checked" style="transform:scale(0.7)" />
								{{item.name}}
							</label>
						</checkbox-group>
					</view>
					<view class="base_line" margin="10rpx"></view>
				</view>
				
			</view>
			
			
			<!-- 卦象详细内容 -->
			<view class="card_content">
				<view class="category">
					<view class="category-line"></view>
					<view class="category-title">卦象信息</view>
				</view>
				
				<scroll-view
					  class="scroll-view"
					  scroll-x="true" 
					  scroll-with-animation 
					  :scroll-left="scrollLeft"
					  @scroll="onXScroll" 
					>
					
				 <TableComponent
				      :userArr="userArr"
					  :zhuguaName="zhuguaName"
					  :bianguaName="bianguaName"
				      :liuShen="liuShen"
				      :fuYaoCellShow="fuYaoCellShow"
				      :banFuYao="banFuYao"
				      :fuYao="fuYao"
				      :zhugua="zhugua"
				      :zhuganDongYao="zhuganDongYao"
				      :zhuguaInfo="zhuguaInfo"
				      :zhuganShiYing="zhuganShiYing"
				      :bianguaShow="bianguaShow"
				      :biangua="biangua"
				      :bianguaInfo="bianguaInfo"
				    />
				</scroll-view>				
			</view>
			<!-- 卦象详细内容 -->
			<view class="card_content">
				<view class="category">
					<view class="category-line"></view>
					<view class="category-title">反馈信息</view>
				</view>
				<view class="category">
					<view class="category-line"></view>
					<view class="category-title">AI信息</view>
				</view>
			</view>
		<!-- </view>	 -->
	</scroll-view>
</view>
</template>

<script>

	import CustomNavBar from '@/components/CustomNavBar.vue';
	import TableComponent  from '@/components/TableComponent.vue';
	import GameData from '@/utils/GameData.js';
	import {
		Solar,
		Lunar
	} from 'lunar-javascript'
	var numObj = {};
	export default {
		components: {
			CustomNavBar,
			TableComponent 
		},
		data() {
			return {
				scrollLeft: 0,
				isqueryUI:false,
				statusBarHeight: 0,
				navHeight: 0,
				yaoData:{},//当前的摇卦数据

				items: [{
						value: 'fuYaoCellShow',
						name: '全伏爻',
						show: true ,
						checked: false
					}, {
						value: 'nayinShow',
						name: '纳音',
						show: true ,
						checked: false
					},
					{
						value: 'xinxiuShow',
						name: '星宿',
						show: true ,
						checked: false
					},
					{
						value: 'jinfangFuYShow',
						name: '京房伏爻',
						show: true ,
						checked: false
					}
				],
				current: 0,
				userArr: "111111",
				inputValue: "",
				seen: true,
				chungua: [],
				// najia: ['', '', '', '', '', ''],
				zhuguaName: '',
				bianguaName: '',
				content: ``,
				//四柱信息
				sizhu: '',//四柱
				kongwang: '',//空亡
				shijian: '',
				shenSha: '',
				fuYaoShow: true,
			
				nayinShow: false,
				xinxiuShow: false,
				jinfangFuYShow: false,
				yingyao:'▅▅ ▅▅',
				yangyao:'▅▅▅▅▅',
				textAlign: 'left',
				
				zhugua: ['', '', '', '', '', ''],
				zhuguaInfo: ['', '', '', '', '', ''],
				bianguaShow: false,
				biangua: ['', '', '', '', '', ''],
				bianguaInfo: ['', '', '', '', '', ''],
				zhuganShiYing: ['', '', '', '', ''],//世应关系
				zhuganDongYao: ['black', 'black', 'black', 'black', 'black'],//动爻
				// bianganShiYing: [],
				 fuYaoCellShow: false,
				fuYao: ['', '', '', '', '', ''],
				liuShen: ['','','','',''],
				banFuYao: [false, false, false,false,false,false],
				// shiyingdong: ['', '', '', '', '', ''],
			}
		},

		onLoad(options) {
			const sysInfo = uni.getSystemInfoSync()
			this.statusBarHeight = sysInfo.statusBarHeight
			this.navHeight = this.statusBarHeight + 88
			const jsonStr = options.data;
			console.log('load=== =====yaoData:',jsonStr);
			this.yaoData =  JSON.parse(jsonStr);;
			console.log('load=== =====yaoData:',JSON.stringify(this.yaoData));
			let platform = uni.getSystemInfoSync().platform
 
			switch (platform) {
				case 'android':
					this.fuYaoShow = false
					this.fuYaoCellShow = false
					this.nayinShow = false
					this.items[0].checked = false
					break;
				case 'harmonyos':
					this.fuYaoShow = false
					this.fuYaoCellShow = false
					this.nayinShow = false
					this.items[0].checked = false
					break;	
				case 'ios':
					this.fuYaoShow = false
					this.fuYaoCellShow = false
					this.nayinShow = false
					this.items[0].checked = false
					break;
				case 'devtools':
					this.fuYaoShow = false
					this.fuYaoCellShow = false
					this.nayinShow = false
					this.items[0].checked = false
					this.items[1].checked = false
					this.items[2].checked = false			
					break;
				default:
					this.fuYaoShow = true
					this.fuYaoCellShow = true
					this.nayinShow = true
					this.items[0].checked = true
					this.items[1].checked = true
					break;
			}
		},
		onShow() {
			let date = undefined
			if (this.yaoData != undefined) {
				date = this.yaoData.yaoDateTime ? new Date(this.yaoData.yaoDateTime) : new Date()
				this.userArr = this.yaoData.yaoDataValue
				this.load()
			} else {
				date = new Date()
			}
			
			var lunar = Lunar.fromDate(date);
			var eightChar = lunar.getEightChar();
			this.sizhu = lunar.getYearInGanZhiByLiChun() + ' ' + lunar.getMonthInGanZhiExact() +
				' ' + lunar.getDayInGanZhiExact() + ' ' + lunar.getTimeInGanZhi() ;
			this.kongwang = lunar
					.getDayXunKong();

			let year = date.getFullYear()
			let month = date.getMonth() + 1
			month >= 9 ? month : month = '0' + month
			let day = date.getDate()
			day >= 9 ? day : day = '0' + day
			let hour = date.getHours()
			hour >= 9 ? hour : hour = '0' + hour
			let minute = date.getMinutes()
			minute >= 9 ? minute : minute = '0' + minute
			let second = date.getSeconds()
			second >= 9 ? second : second = '0' + second
			
			this.shijian = year + '-' + month + '-' + day + "  " + hour + ":" + minute + '【' + lunar
				.getMonthInChinese() + '月' + lunar.getDayInChinese() + '】'

			
			this.liuShen = GameData.getLiuShen(lunar.getDayGanExact().trim())
			
			let tianGanShenShaData = GameData.getTianGanShenSha(lunar.getDayGanExact())
			if(tianGanShenShaData!= undefined){
				//神煞：
				this.shenSha = '贵人:' + tianGanShenShaData[0] + ' ' + ' 文昌:' + tianGanShenShaData[1] + ' ' + ' 天喜:' + GameData.getDiZhiShenSha(lunar
						.getYearZhiExact())
			}
		},
		methods: {
			 onXScroll(event) {
			      // 获取当前滚动位置
				  console.log('onXScroll===before :',this.scrollLeft);
			      this.scrollLeft = event.detail.scrollLeft;
				  console.log('onXScroll===after :',this.scrollLeft);
			},
			// loadYaoData() {
			//   console.log('loadYaoData=======', this.currentYaoId);
			  
			//   // 从本地存储中获取所有 keys
			//   const keys = uni.getStorageSync('keys') || [];
			  
			//   // 找到当前需要加载的 key
			//   const currentKey = keys.find(key => key === this.currentYaoId);
			  
			//   if (currentKey) {
			//     // 获取当前 key 对应的数据
			//     const storedUserData = uni.getStorageSync(currentKey);
			//     if (storedUserData) {
			//       this.yaoDataList = JSON.parse(storedUserData);
			//       console.log('loadYaoData loaded from local storage:', this.yaoDataList);
			// 	  this.currentYaoData = storedUserData;
			//     } else {
			//       console.error('loadYaoData No data found for key:', currentKey);
			//     }
			//   } else {
			//     console.error('loadYaoData Key not found:', this.currentYaoId);
			//   }
			// },
			formatDate(date) {
				return new Date(date).toISOString().replace('T', ' ').substring(0, 19);
			},
			load() {
				// this.userArr = "222111"
				console.info("this.userArr==="+this.userArr)
				if(!this.userArr){
					console.info("this.userArr==return=")
					return ;
				}
	
				
			    let zhuguanajia = GameData.getZhuGuaNajia(this.userArr)
				let zhuData = GameData.getData(GameData.getZhuGuaData(this.userArr));
				let bianData = GameData.getData(GameData.getBianGuaData(this.userArr));
				

				let zhushiyin = zhuData[3];
				let bianshiyin = bianData[3];

				this.zhuganShiYing = GameData.getShiYing(zhushiyin)
				// this.bianganShiYing = GameData.getShiYing(bianshiyin)
				let zhuGuaGong = GameData.getGuaGong(zhuData)
				let bianGuaGong = GameData.getGuaGong(bianData)
				let zhuGuaGongliuQing = GameData.getGuaGongWuXin(zhuData)
				let bianGuaGongliuQing = GameData.getGuaGongWuXin(bianData)
				let tempFuYao = GameData.getFuYao(zhuData,this.userArr,this.jinfangFuYShow) //伏爻纳甲
				console.log("tempFuYao:"+tempFuYao)
				this.fuYaoShow = tempFuYao.length > 0
				let isShowBianYao = false
				let fuYaoDic = {'子孙':false,'官鬼':false,'妻财':false,'父母':false,'兄弟':false};
				//处理主卦
				for (let i = 0; i < this.userArr.length; i++) {
					let item = this.userArr.charAt(i);
					let zhuGuaYao = zhuguanajia[i]
					let wuxin = zhuGuaYao[1]
					let liuqing = zhuGuaGongliuQing[GameData.getWuXingIndex(wuxin)[1]]
					fuYaoDic[liuqing] = true;
				}
				//处理主卦
				for (let i = 0; i < this.userArr.length; i++) {
					let item = this.userArr.charAt(i);
					let zhuGuaYao = zhuguanajia[i]

					let wuxin = zhuGuaYao[1]
					let liuqing = zhuGuaGongliuQing[GameData.getWuXingIndex(wuxin)[1]]
					
					if (this.fuYaoShow) {
						//计算伏爻
						let zhuFuYao = tempFuYao[i]
						let fuYaoWuXin = GameData.getWuXingIndex(zhuFuYao[1])
						this.fuYao[i] = zhuGuaGongliuQing[fuYaoWuXin[1]] + tempFuYao[i]
						if(!fuYaoDic[zhuGuaGongliuQing[fuYaoWuXin[1]]])
						{
							this.banFuYao[i] = true
						}else
						{
							this.banFuYao[i] = false
						}
					}
					
					let ganzhi = zhuGuaYao.substring(0, 2)
					let nayin = this.nayinShow ? GameData.getNayin(ganzhi) : ''
					// if (item == '0' || item == '2') {
					// 	this.zhugua[i] = this.yingyao 	
					// } else {
					// 	this.zhugua[i] = this.yangyao
					// }
					switch(item)
					{
						case '0':
							this.zhugua[i] = '/static/images/yinyao.png'
							break;
						case '1':
							this.zhugua[i] = '/static/images/yangyao.png'
							break;
						case '2':
							this.zhugua[i] = '/static/images/yinyao1.png'
							break;
						case '3':
							this.zhugua[i] = '/static/images/yangyao1.png'
							break;
					}
					this.zhuganDongYao[i] = item == '2' || item == '3'?"red":"black"
					this.zhuguaInfo[i] = liuqing + zhuGuaYao + nayin
					
					if(item == '2' || item == '3')
					{
						isShowBianYao = true;
					}
				}

				let bianguanajia = GameData.getBianGuaNajia(this.userArr)
				let platform = uni.getSystemInfoSync().platform
				switch (platform) {
					case 'android':
						this.bianguaShow = this.fuYaoCellShow?false:isShowBianYao;
						break;
					case 'ios':
						this.bianguaShow = this.fuYaoCellShow?false:isShowBianYao;
						break;
					default:
						// this.bianguaShow = isShowBianYao;
						//this.bianguaShow = this.fuYaoCellShow?false:isShowBianYao;
						this.bianguaShow = true
						break;
				}
				
				//处理变卦
				for (let i = 0; i < this.userArr.length; i++) {
					let item = this.userArr.charAt(i);
					let bianGuaYao = bianguanajia[i]
					let wuxin = bianGuaYao[1]
					let liuqing = zhuGuaGongliuQing[GameData.getWuXingIndex(wuxin)[1]]
					let ganzhi = bianGuaYao.substring(0, 2)
					let nayin = this.nayinShow ? GameData.getNayin(ganzhi) : ''
		
					switch(item)
					{
						case '0':
							this.biangua[i] = '/static/images/yinyao.png'
							break;
						case '1':
							this.biangua[i] = '/static/images/yangyao.png'
							break;
						case '2':
							this.biangua[i] = '/static/images/yangyao.png'
							break;
						case '3':
							this.biangua[i] = '/static/images/yinyao.png'
							break;
					}
					this.bianguaInfo[i] =  liuqing + bianGuaYao + nayin 
				}

				this.zhuguaName = zhuData[1] + ' ' + (zhuGuaGong == undefined ? '' : zhuGuaGong)
				this.bianguaName = bianData[1] + ' ' + (bianGuaGong == undefined ? '' : bianGuaGong)
			},
			btnClick() {
				if (this.inputValue.length == 6) {
					this.userArr = this.inputValue
					this.load()
					// this.$u.toast(zhuGuaGongliuQing)
				} else {
					this.$u.toast("卦名不对");
				}
			},
			async testco() { // 注意异步
				const userdata = uniCloud.importObject('userdata') // 导入云对象
				try {
					const res = await userdata.sum(1, 2) //导入云对象后就可以直接调用该对象的sum方法了，注意使用异步await
					console.log(res) // 结果是3
					this.$u.toast(res);
				} catch (e) {
					console.log(e)
				}
				uniCloud.callFunction({
					name: "data"
				}).then(res => {
					console.log(res)
				})
			},
			checkboxChange: function(e) {
				var items = this.items,
					values = e.detail.value;
				console.info("values===" + values)
				if (values.indexOf('fuYaoShow') >= 0) {
					this.fuYaoShow = true;
				} else {
					this.fuYaoShow = false;
				}
				if (values.indexOf('fuYaoCellShow') >= 0) {
					this.fuYaoCellShow = true;
				} else {
					this.fuYaoCellShow = false;
				}
				if (values.indexOf('nayinShow') >= 0) {
					this.nayinShow = true;
				} else {
					this.nayinShow = false;
				}
				if (values.indexOf('jinfangFuYShow') >= 0) {
					this.jinfangFuYShow = true;
				} else {
					this.jinfangFuYShow = false;
				}
				// console.info("this.fuYaoCellShow:"+this.fuYaoCellShow+" this.fuYaoShow:"+this.fuYaoShow);
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.indexOf(item.value) >= 0) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				this.load()
			}

		}
	}
</script>

<style lang="scss" scoped>
	$uni-line-color: #DDDDDD;
	$uni-magin:10rpx;
	$uni-magin_big:20rpx;
	$uni-font-size:28rpx;
	$uni-margin-top:15rpx;
	$uni-item-ceil-height:70rpx;
	$uni-item-ceil-sub-height:40rpx;
	$uni-button-height:80rpx;
	// $uni-font-color:#d3dce6;
.detail-container {
  min-height: 100vh;
  background-color: #4B79FF;
}
.content {
  box-sizing: border-box;
  padding: 10rpx;
  margin-top: 20rpx;
  
}
.card_content{
	background-color: #fff;
	padding: 10rpx;
	margin: 20rpx 5rpx 5rpx 5rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	border-radius: 16rpx;
}
.scroll-view {
  white-space: nowrap; /* 防止内容自动换行 */
  overflow: hidden;
  // border: 1px solid #ccc;
  padding: 10rpx 0;
}
.parent-component {
  padding: 20px;
}

	.u-row {
		margin: $uni-magin 0;
	}

	.demo-layout {
		// height: 80rpx;
		border-radius: 2rpx;
	}

	.bg-purple {
		// font-size: 22rpx;
		background: #d3dce6;
	}

	.bg-purple-light {
		// font-size: 22rpx;
		background: #e5e9f2;
	}

	.bg-purple-dark {
		// font-size: 22rpx;
		background: #99a9bf;
	}

	.flex-item {
		width: 33.3%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}

	.flex-item-V {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}

	.text {
		margin: 0rpx 0rpx;
		padding: 0 5rpx;
		background-color: #ebebeb;
		height: 62rpx;
		line-height: 62rpx;
		text-align: center;
		color: #000;
		font-size: 30rpx;
	}

	.title {
		margin: 1rpx 2rpx;
		padding: 10rpx 5rpx;
		background-color: #d3dce6;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: $uni-font-size;
	}

	/**全伏爻*/
	.btn-box {
		display: flex;
		flex-direction: row;
		margin-top: $uni-magin_big;
	}
	.input-default{
		height: $uni-button-height;
		flex: 4;
		
	}
 
	.child-view, .child-view-info {
	  padding: 0px;
	  // border: 2px solid #ddd;
	}
		
	.child-view{
		flex: 1;  
		padding: 0px;
		margin: 0px;  /* 右侧间距 */
	}
	
	.child-view-info {
		flex: 7;
		align-self: left;
		text-align: left;
		padding: 5rpx;
	}
	
	.btn-default {
		padding: 10px 20px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: $uni-font-size;
		margin: 4px 2px;
		background-color: #e7e7e7;
		color: black;
		border-radius: 5px;
		flex: 1;
	}
	.btn-default:active {
		background-color: #F4F0F0;
	}

	.category {
		/**分类*/
		display: flex;
		flex-direction: row;
		// background: rebeccapurple;
		align-content: center;
		margin-top: $uni-magin;

		.category-line {
			width: 5rpx;
			height: $uni-font-size;
			border-right: solid #000000 6rpx;
			border-radius: 5rpx;
			align-self: center;
		}

		.category-title {
			margin-left: 10rpx;
			font-weight: bold;
			font-size: $uni-font-size;
		}
	}
	.quanyao {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-top: $uni-magin;
		margin-bottom: $uni-magin;
		font-size: $uni-font-size;
		// background-color: #99a9bf;
		// word-break: keep-all;
	}

	.lable-view {
		display: flex;
		flex-direction: row;

		.lable-view-title {
			font-weight: bold;
			font-size: $uni-font-size;
			// background-color: #99a9bf;
			word-break: keep-all;
		}
	}

	.check-box {
		// background-color: #ff0000;
	}

	.mb-10 {
		font-size: $uni-font-size;
		color: red;
	}

	.line {
		// color: $uni-line-color;
		margin-top: $uni-magin_big;
		margin-bottom: $uni-magin_big;
		border: 1rpx solid red;
	}
	.base_line {
		// color: $uni-line-color;
		margin-top: $uni-magin;
		margin-bottom: $uni-magin;
		border: 1rpx solid #ececec;
	}
</style>